<!-- 景区详情 -->
<style scoped>
/* 顶部 */
.box {
    background-color: #f4f4f4;
    width: 100%;
    height: 500px;
}

.top {
    width: 96%;
    margin-left: 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    background-color: white;
}

.button {
    width: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    border: 1px solid;
    border-radius: 20px;
}

.backspacing {
    width: 20px;
    height: 20px;
}

.null {
    width: 70px;
}

/* 详情 */
.particulars {
    background-color: #f4f4f4;
}

/* 图片 */
.particulars_img {
    width: 100%;
    height: 200px;
}

/* 视频 */
.video {
    width: 100%;
    height: 200px;
}

/* 按钮 */
.button_button {
    position: absolute;
    top: 200px;
    left: 20px;
    width: 100px;
}

.particulars_button {
    background-color: black;
    color: white;
    border: 1px solid;
    margin-left: 4px;
    border-radius: 25px;
}

.particulars_button.active {
    color: black;
    background-color: white;
    border-radius: 25px;
}

/* 提醒 */
.remind {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: red;
    background-color: #eee0e0;
    width: 95%;
    height: 35px;
    margin-left: 2.5%;
    margin-top: 5px;
    border-radius: 25px;
}

.remind_img {
    width: 30px;
    height: 30px;
}

/* 评分 */
.score {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 10px;
    margin-top: 14px;
}

.score_h4 {
    font-size: 20px;
}

.score_text {
    width: 120px;
    background-color: #eaf0fd;
    text-align: center;
    border-radius: 15px;
}

.grade {
    width: 100px;
    /* height: 100px; */
    text-align: center;
}

.grade_number {
    height: 30px;
    background-color: #ffeb3b;
    font-size: 20px;
    font-weight: 600;
    border-radius: 15px 15px 0 0;
}

.grade_score {
    background-color: #ded8a3;
    font-size: 18px;
    border-radius: 0 0 15px 15px;
}

/* 游玩帮 */
.Play_LeaderBoard {
    margin: 10px 10px;
    width: 230px;
    display: flex;
    justify-content: space-around;
    text-align: center;
    align-content: center;
}

.Play_LeaderBoard_board {
    background-color: #ffc300;
    font-size: 19px;
    font-weight: 600;
    width: 80px;
    border-radius: 15px 0 0 15px;
}

.Play_LeaderBoard_one {
    background-color: #d7cd6f;
    width: 150px;
    text-align: center;
    align-content: center;
    border-radius: 0 15px 15px 0;
    line-height: 30px;
}

/* 开放时间 */
.openTime {
    display: flex;
    align-content: center;
    text-align: center;
    margin-top: 10px;
    margin-left: 10px;
}

.openTime p {
    color: #07cd9e;
    font-size: 18px;
    margin-right: 10px;
    font-weight: 600;
}

.openTime div {
    width: 72%;
    height: 42px;
    overflow-x: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    text-align: center;
    align-content: center;
}

/* 介绍 */
.presentation {
    margin-left: 10px;
    width: 200px;
    display: flex;
    justify-content: space-between;
}

.presentation div {
    border: 1px solid #FFC300;
    font-size: 9px;
    padding: 3px;
    border-radius: 4px;
}

/* 地图 */
.map {
    margin-top: 10px;
    width: 95%;
    height: 70px;
    /* 假设你想让背景图片占据整个视口的高度 */
    background-image: url("../assets/img17038018abf4ed810.png");
    background-size: cover;
    /* 这将确保背景图片覆盖整个元素，而不会被拉伸或压缩 */
    background-position: center;
    /* 这将确保背景图片在元素中居中显示 */
    background-repeat: no-repeat;
    /* 这将确保背景图片不会重复 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin-left: 2.5%;
    border-radius: 15px;
}

.map_text {
    margin-left: 10px;
    width: 86%;
    height: 20px;
    text-overflow: ellipsis;
    overflow-x: hidden;
}

.distance {
    margin-left: 10px;
    display: flex;
    margin-top: 15px;
}

.distance img {
    height: 25px;
    width: 25px;
}

.location {
    display: flex;
    justify-content: space-evenly;
    width: 150px;
}

.location img {
    width: 25px;
    height: 25px;
}

/* 游玩指南 */
.play {
    margin-top: 10px;
    padding: 0 10px;
}

.play_handbook {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.play_handbook_div {
    font-weight: 600;
    font-size: 17px;
}

.View_all {
    display: flex;
    align-items: center;
    text-align: center;
}

.View_all img {
    width: 35px;
    height: 35px;
}

/* 
.amusement_park {
  display: flex;
  justify-content: space-around;
} */

.amusement_park_div img {
    width: 120px;
    height: 80px;
}

/* 门票介绍 */
.ticket {
    margin-top: 10px;
}

.ticket_h4 {
    font-size: 20px;
    font-weight: 600;
    margin-left: 10px;
}

.ticket_div {
    display: flex;
    justify-content: space-around;
    width: 80%;
}

.ticket_div div {
    background-color: white;
    padding: 4px;
}

/* 门票价格 */
.rates {
    background-color: white;
    width: 95%;
    margin-left: 2.5%;
    margin-top: 10px;
    padding: 0 10px;
}

.rates_h4 {
    font-size: 20px;
    font-weight: 600;
}

.Adult_area {
    margin-top: 10px;
}

/* 儿童区域 */
.children {
    margin-top: 10px;
}

.rates_div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.rates_div_notice {
    display: flex;
}

.rates_div_buy {
    display: flex;
}

.rates_div_buy img {
    width: 25px;
    height: 25px;
}

.adult_ticket {
    font-size: 16px;
    font-weight: 600;
}

.reserve {
    color: blue;
}

.price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.price b {
    color: red;
}

.price p {
    font-size: 20px;
    color: red;
}

.discounts {
    border: 1px solid red;
    color: red;
    border-radius: 10px;
    width: 80px;
    height: 25px;
}

.reserve_button {
    background-color: #ff5733;
    color: white;
    width: 75px;
    height: 30px;
    border: none;
    margin-top: 10px;
    border-radius: 15px;
    font-weight: 600;
}

/* 评论 */
.comment {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    text-align: center;
    align-items: center;
    margin: 3% 0;
}

.comment_div {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.comment_top {
    display: flex;
    justify-content: center;
    align-items: center;
}

.comment_top img {
    width: 35px;
    height: 35px;
}

.comment_van {
    width: 100px;
}

/* 评论详情 */
.comment_box {
    background-color: white;
}

.Comment_details {
    width: 95%;
    height: auto;
    margin-left: 2.5%;
    /* margin-top: 10px; */
    padding: 10px 0;
}

.Comment_particulars {
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    font-size: 15px;
}

.comment_all {
    /* width: 100%; */
    margin-left: 12px;
}

.comment_img {
    display: flex;
    width: 60%;
}

.comment_fen {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.comment_img img {
    width: 38px;
    height: 38px;
    border-radius: 20px;
}

.comment_van {
    width: 100%;
}

.comment_van_van {
    width: 100%;
}

.comment_name {
    font-size: 18px;
    margin: 10px 0px;
    padding: 0 10px;
}

.comment_name_img {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 10px;

    /* height: 120px; */
}

.comment_name_img img {
    width: 110px;
    height: 110px;
}

.browse {
    display: flex;
    justify-content: space-between;
    width: 95%;
    height: 30px;
    margin-left: 2.5%;
    border-bottom: 1px solid #184184;
}

.browse_number {
    display: flex;
    justify-content: space-around;
    margin-left: 1px;
    margin-top: 3px;
}

.browse_img {
    display: flex;
}

.browse_img img {
    width: 25px;
    height: 25px;
}

/* 相关攻略字体 */
.Related_guideline {
    font-size: 20px;
    font-weight: 600;
    margin: 10px 10px;
}

/* 攻略列表 */

/* <!-- 推荐攻略 --> */
.Recommendation-Guideline {
    column-count: 2;
    column-gap: 0vh;
    padding-top: 10px;
    padding-left: 2%;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 50px;
}

.Recommended-one {
    direction: ltr;
    width: 96%;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    break-inside: avoid;
}

.Recommended-two {
    direction: ltr;
    width: 96%;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    break-inside: avoid;
}

.scenic-bottom_child {
    width: 50%;
    display: flex;
}

.scenic-div {
    margin: 0 5px;
}

.two-img {
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    height: 25vh;
}

html {
    touch-action: none;
    touch-action: pan-y;
}

.scenic-bottom {
    display: flex;
    justify-content: space-between;
    padding-left: 0.5vh;
    font-size: 11px;
    font-weight: 300;
    padding-right: 0.5vh;
    padding-top: 0.8vh;
}

.scenic {
    display: flex;
    flex-direction: column;
    background-color: white;
    margin-top: -0.5vh;
    padding: 5px 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.scenic-top {
    font-size: 14px;
    font-weight: 600;
}

.scenic img {
    width: 12px;
    height: 12px;
}

.Walkthrough-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%;
    padding-top: 6.5px;
    padding-bottom: 6.5px;
    padding-right: 6.5px;
}

.Walkthrough-left {
    display: flex;
    align-items: center;
}

.Walkthrough-right {
    display: flex;
    font-size: 13px;
    align-items: center;
}

.Walkthrough-img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.Walkthrough-right-img {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

.pu_one {
    width: 48%;
    flex-direction: column;
    display: flex;
    break-inside: avoid;
    flex-direction: column;
}

.Recommended-img {
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.Walkthrough-ping {
    font-size: 13px;
    padding-top: 6.5px;
}

.Walkthrough-list {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding-left: 6.5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.user-left div {
    font-size: 10px;
    color: #828282;
    padding-left: 6.5px;
}

.duo {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    bottom: 13px;
    justify-content: center;
}

.Bottom-navigation {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    align-items: center;
    height: 8vh;
    background-color: white;
    justify-content: space-around;
    font-size: 12px;
}

.navigation-child {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.navigation-child-img {
    width: 20px;
    height: 20px;
}

.rocket {
    width: 5vh;
    height: 5vh;
    z-index: 9999;
}

.ejector {
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    margin-top: -5vh;
    position: absolute;
    box-shadow: 0px 0px 11px 0px rgba(229, 229, 229, 1);
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -5vh;
}

/* 星星 */
.xing {
    display: flex;
    width: 2vh;
    height: 2vh;
    padding-left: 0.5vh;
}

.run {
    display: flex;
    align-items: center;
}

.lio {
    width: 96%;
    margin: 0 auto;
    background-color: white;
    padding-top: 10px;
    border-radius: 6px;
    margin-top: 10px;
}

.eate {
    font-size: 13px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.background_image {
    width: 32%;
    height: 15vh;
}

.imgs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6.5px;
}

.support {
    width: 2vh;
    height: 2vh;
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #F4F4F4;
    padding-bottom: 1.5vh;
}

.row-right {
    display: flex;
    align-items: center;
    padding-right: 0.3vh;
    width: 15%;
    justify-content: space-between;
}

.ping {
    display: flex;
    align-items: center;
    padding-top: 2vh;
    justify-content: space-between;
}

.ping img {
    width: 2vh;
    height: 2vh;
}

.ping-zi {
    font-size: 13px;
}

.flex {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

#ping_lun>p {
    font-size: 12px;
}

.xing img {
    width: 16px;
    height: 16px;
}
</style>

<template>
    <div>
        <!-- 顶部导航栏 -->
        <div class="top">
            <button class="button">
                <img src="../assets/zuoz.png" alt="" class="backspacing" @click="BACK" />
                <span>|</span>
                <img src="../assets/home2.png" alt="" class="backspacing" />
            </button>
            <div class="text">景区详情</div>
            <div class="null"></div>
        </div>

        <!-- 最大详情div-->
        <div class="particulars">
            <!-- 图片 -->
            <img v-show="ShowImg" :src="`https://wwz.jingyi.icu/${secID.img}`" alt="" class="particulars_img"
                 />
            <!-- 视频 -->
            <video v-show="ShowVideo" :src="`https://wwz.jingyi.icu/${secID.video}`" controls class="video"></video>

            <div class="button_button">
                <button class="particulars_button" :class="{ active: ShowColor }" @click="button_img" >
                    图片
                </button>
                <button class="particulars_button" :class="{ active: !ShowColor }" @click="button_video">
                    视频
                </button>
            </div>

            <!-- 票务提前预定通知 -->
            <div class="remind">
                <img src="../assets/ling.png" class="remind_img" alt="" />
                <p>票务提前预定通知</p>
            </div>

            <!-- 评分介绍 -->
            <div class="score">
                <div>
                    <div class="score_h4">{{ secID.name }}</div>
                    <div class="score_text">#{{ secID.label }}</div>
                </div>
                <div class="grade">
                    <div class="grade_number">{{ secID.score }}</div>
                    <div class="grade_score">{{ secID.number }}评价</div>
                </div>
            </div>

            <!-- 游玩帮 -->
            <div class="Play_LeaderBoard">
                <div class="Play_LeaderBoard_board">游玩榜</div>
                <div class="Play_LeaderBoard_one">新乡游玩榜第一名</div>
            </div>

            <!-- 今日开放时间 -->
            <div class="openTime">
                <p>今日开放</p>
                <div>{{ secID.start_time }}</div>
            </div>

            <!-- 介绍 -->
            <div class="presentation">
                <div>门票价格实拍图</div>
                <div>公益景区</div>
                <div>有停车场</div>
            </div>

            <!-- 地图 -->
            <div class="map">
                <div>
                    <div class="map_text">{{ secID.address }}</div>
                    <div class="distance">
                        <img src="../assets/dizhi.png" alt="" />
                        <p>距离您有39.6公里</p>
                    </div>
                </div>
                <div class="location">
                    <img src="../assets/地图类_地图.png" alt="" @click="map" />
                    <img src="../assets/dz.png" alt="" />
                </div>
            </div>

            <!-- 游玩指南 -->
            <div class="play">
                <div class="play_handbook">
                    <div class="play_handbook_div">游玩指南</div>
                    <div class="View_all">
                        <p>查看全部</p>
                        <img src="../assets/箭头_列表向右_o.png" alt="" />
                    </div>
                </div>

                <div class="amusement_park">
                    <div class="amusement_park_div">
                        <img :src="`https://wwz.jingyi.icu/${secID.img}`" alt="" />
                        <p>{{ secID.title }}</p>
                    </div>
                </div>
            </div>

            <!-- 门票介绍 -->
            <div class="ticket">
                <div class="ticket_h4">门票</div>
                <div class="ticket_div">
                    <div>成人</div>
                    <div>儿童</div>
                    <div>学生</div>
                    <div>随时退</div>
                    <div>无需退票</div>
                </div>
            </div>

            <!-- 门票价格 -->
            <div class="rates">
                <div class="rates_h4">门票</div>
                <!-- 成人票 -->
                <div class="Adult_area" v-for="item in arr" :key="item.id" :node="item">
                    <div class="rates_div">
                        <div class="adult_ticket">{{ item[0].name }}</div>
                        <s>￥{{ item[0].original_price }}</s>
                    </div>

                    <div class="rates_div">
                        <div class="reserve">可订明日</div>
                        <div class="price">
                            <b>￥</b>
                            <p>{{ item[0].current_price }}</p>
                            起
                        </div>
                    </div>

                    <div class="rates_div">
                        <div class="reserve">随时退，无需退票</div>
                        <!-- <div class="discounts">优惠￥10</div> -->
                    </div>

                    <div class="rates_div">
                        <div class="rates_div_notice">
                            <div>已售5000+</div>
                            <div class="rates_div_buy">
                                <p>购买须知</p>
                                <img src="../assets/箭头_列表向右_o.png" alt="" />
                            </div>
                        </div>
                        <button class="reserve_button">预定</button>
                    </div>
                </div>

                <!-- 儿童票 -->
            </div>

            <!-- 评论 -->
            <div class="comment">
                <div class="comment_div">评论</div>
                <div class="comment_top">
                    <p>查看全部</p>
                    <img src="../assets/箭头_列表向右_o.png" alt="" />
                </div>
            </div>

            <!-- 评论详情 -->
            <div class="comment_box">
                <div class="Comment_details" v-for="item in array" :key="item.id">
                    <div class="Comment_particulars">
                        <div class="comment_img">
                            <img :src="`https://wwz.jingyi.icu/${item.avatar}`" alt="" />
                            <div class="comment_all">
                                <div>
                                    <p>{{ item.name }}</p>
                                </div>
                                <div class="run">打分
                                    <div class="xing">
                                        <div class="xing">
                                            <img src="../assets/xingxing.png" alt="" />
                                            <img src="../assets/xingxing.png" alt="" />
                                            <img src="../assets/xingxing.png" alt="" />
                                            <img src="../assets/xingxing.png" alt="" />
                                            <img src="../assets/ban.png" alt="" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>{{ item.create_time }}</div>
                    </div>
                    <div class="comment_name">{{ item.content }}</div>
                    <div class="comment_name_img">
                        <img :src="`https://wwz.jingyi.icu/${!item.img}`" @error="(e) =>{e.target.src =image_list}" alt="" />
                    </div>
                    <div class="browse">
                        <div class="browse_number">
                            <span>浏览</span>
                            <p>{{ item.number }}</p>
                        </div>
                        <div class="browse_img">
                            <img src="../assets/support.png" alt="" />
                            <img src="../assets/diandian.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>

            <!-- 相关攻略 -->
            <div class="Related_guideline">相关攻略</div>
            <!-- 攻略列表 -->
            <div class="Recommendation-Guideline">
                <div class="Recommended-two" @click="gonglll" v-for="item in Strategy" :key="item.id">
                    <img :src="`https://wwz.jingyi.icu${item.img}`" alt="" class="Recommended-img" />
                    <div class="Walkthrough-list">
                        <div class="Walkthrough-ping">
                            {{ item.title }}
                        </div>
                        <div class="Walkthrough-user">
                            <div class="Walkthrough-left">
                                <img :src="`https://wwz.jingyi.icu${item.avatar}`" alt="" class="Walkthrough-img" />
                                <div>{{ item.name }}</div>
                            </div>
                            <div class="Walkthrough-right">
                                <img src="../assets/love.png" alt="" class="Walkthrough-right-img" />
                                <div>{{ item.like_num == null ? "8" : item.like_num }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="duo">没有更多了</div>
            <van-action-bar>
                <van-action-bar-icon icon="comment-o" text="写评论" @click="Comment(secID.id)" />
                <van-action-bar-icon icon="play-circle-o" text="景点讲解" />
                <van-action-bar-icon icon="volume-o" text="演出预告" />
                <van-action-bar-button icon="share-o" type="danger" @click="ckmp" text="查看门票" />
            </van-action-bar>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Comments, Scenic } from "../api/home";
import { Ticketing } from "../api/ticket";
import { intro } from "../api/intro";
import image_list from "../assets/640 (58).jpg";
const router = useRouter();
const route = useRoute();
// 景区一行
const secID = JSON.parse(sessionStorage.getItem('secID'));
console.log(secID, '景区一行数据');
// 景区下标
const secdata = sessionStorage.getItem('secdata');
// 景区一行
const secitem = sessionStorage.getItem('secitem')

// 返回首页
function BACK() {
    router.push({
        name: "home",
    });
}
// 图片错误替换图片
const fallbackSrc = ref(""); // 替换图片路径
console.log(fallbackSrc.value,'123');
const handleError = () => {
    console.log(1111);
    fallbackSrc.value = true;// 阻止再次触发 onerror 事件
}
// 切换图片/视频
const ShowVideo = ref(false);
const ShowImg = ref(true);
const ShowColor = ref(false);
function button_video() {
    ShowVideo.value = true;
    ShowImg.value = false;
    ShowColor.value = true;
}

function button_img() {
    ShowVideo.value = false;
    ShowImg.value = true;
    ShowColor.value = false;
}

// 售票列表
const arr = ref([])
// const urr = ref([])
Ticketing({
    scenic_id: route.query.id,
}).then((res) => {
    console.log(res, "售票列表");
    //   arr.value = res.data;
    res.data.forEach(item => {
        if (item.children) {
            arr.value.push(item.children)
        }
    });
    console.log(arr.value);
});

// 景区评论
const array = ref([])
Comments({
    scenic_id: route.query.id,
}).then((res) => {
    console.log(res, "景区评论");
    array.value = res.data;
    console.log(array.value);
});

// 攻略接口
const Strategy = ref([]);
intro().then((res) => {
    console.log(res, "攻略接口");
    Strategy.value = res.data;
    console.log(Strategy.value);
});

// 跳转地图
function map() {
    router.push({
        name: "map",
    });
}

// 跳转评论
function Comment(id) {
    console.log(secID.id, '7542');
    router.push({
        name: "Comment",
        // query:{
        //     sceicid:secID.value,
        // }    
    });
}

const spot_list = ref([]);
Scenic().then(res => {
    console.log(res);
    // recommend.value = res.data
    spot_list.value = res.data;
    console.log(spot_list.value, '123');
})

// 查看门票
const ckmp = () => {
    router.push({
        name: "ticket",
        query: {
            id: spot_list.value[3].id
        }
    });
}
</script>
